<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      title="黑马程序员-search"
      left-text="返回"
      right-text="添加"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 表单区域 -->
    <form action="/">
      <van-search
        v-model="inputvalue"
        value
        placeholder="请输入搜索关键词"
        show-action
        @cancel="onCancel"
        @keypress="searchA($event)"
        clearable
        @clear="qingchu"
      />
    </form>
    <!-- 搜索内容区域 -->
    <van-swipe-cell v-for="(item,index) in resultList" :key="index">
      <van-cell>
        <template #title>
          <span>{{item.name}}</span>
        </template>
        <template #default>
          <span>商品上架时间:{{item.ctime | dateFormat}}</span>
        </template>
      </van-cell>
      <template #right>
        <van-button square type="danger" text="删除" @click="shanchu(item.id)" />
      </template>
    </van-swipe-cell>
    <!-- 搜索历史和垃圾桶 -->
    <van-cell :border="false" title="搜索历史" v-if="lishiflag">
      <van-icon name="delete" size="16" @click="shanchujilu" />
    </van-cell>
    <!-- 分割线 -->
    <van-divider
      contentPosition="center"
      customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
      v-if="lishisousuoflag"
    >暂无搜索历史</van-divider>
    <van-cell v-if="biaoqianflag">
      <van-tag
        @click="anniu(item)"
        class="biaoqian"
        :key="index"
        v-for="(item,index) in historys"
      >{{item}}</van-tag>
    </van-cell>
    <!-- 取消删除  -->
    <van-popup
      duration
      v-model="show"
      position="top"
      :style="{ height: '5%','color': '#fff' , 'background-color': 'red' ,'text-align': 'center'}"
    >已取消删除</van-popup>
    <!-- 确认删除  -->
    <van-popup
      duration
      v-model="queren"
      position="top"
      :style="{ height: '5%','color': '#fff' , 'background-color': 'greenyellow' ,'text-align': 'center'}"
    >已删除</van-popup>
    <!-- 不能为空  -->
    <van-popup
      duration
      v-model="kong"
      position="top"
      :style="{ height: '5%','color': '#fff' , 'background-color': 'red' ,'text-align': 'center'}"
    >不能为空</van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      queren: false,
      kong: false,
      lishisousuoflag: true,
      lishiflag: true,
      biaoqianflag: true,
      resultList: [],
      // 输入框里的值
      inputvalue: '',
      // 历史记录数据
      historys: [],
      storage: []
    };
  },
  created: function() {
    this.historys = this.getstorage();
    if (this.historys) {
      this.lishisousuoflag = false;
      this.biaoqianflag = true;
    }
  },

  methods: {
    // 获取localStorage历史记录数据
    getstorage: function() {
      const shuju = window.localStorage;
      var json = shuju.getItem('historys');
      var jsonobj = JSON.parse(json);
      return jsonobj;
    },
    // 返回首页
    onClickLeft() {
      this.$router.push('/home');
    },
    // 添加页面
    onClickRight() {
      this.$router.push('/addgoods');
    },
    // 搜索框回车事件
    searchA: async function(e) {
      if (e.keyCode === 13) {
        if (this.inputvalue.trim().length === 0) {
          this.kong = true;
          setTimeout(() => {
            this.kong = false;
          }, 2000);
          return;
        }
        const { data: res } = await this.$axios.get('http://www.liulongbin.top:3005/api/getprodlist');
        console.log(res);
        if (res.status !== 0) return alert('ccc');
        this.resultList = res.message;
        // historys搜索记录存入localStorage
        var storage = this.getstorage();
        if (!storage) storage = [];
        if (this.inputvalue) {
          storage.push(this.inputvalue);
          var aa = JSON.stringify(storage);
        }
        window.localStorage.setItem('historys', aa);
        this.historys.push(this.inputvalue);
        this.lishiflag = false;
        this.lishisousuoflag = false;
        this.biaoqianflag = false;
      }
    },
    // 取消
    onCancel() {
      this.inputvalue = '';
      // this.neirongflag = false;
      this.lishiflag = true;
      this.lishisousuoflag = false;
      this.biaoqianflag = true;
      this.resultList = [];
    },
    // 删除
    shanchu: function(id) {
      // alert('确定删除吗');
      this.$dialog
        .confirm({
          title: '警告',
          message: '是否确认删除'
        })
        .then(async () => {
          const { data: res } = await this.$axios.get('http://www.liulongbin.top:3005/api/delproduct/' + id);
          if (res.status !== 0) return alert('删除失败');
          this.queren = true;
          setTimeout(() => {
            this.queren = false;
          }, 3000);
        })
        .catch(() => {
          // alert('取消删除');
          console.log('取消删除');
          this.show = true;
          setTimeout(() => {
            this.show = false;
          }, 3000);
        });
    },
    //删除历史记录
    shanchujilu: function() {
      window.localStorage.removeItem('historys');
      this.historys = [];
      this.lishisousuoflag = true;
    },
    // 点击历史记录
    anniu: function(item) {
      this.inputvalue = item;
    },
    // X清除按钮
    qingchu: function() {
      this.lishiflag = true;
      this.lishisousuoflag = false;
      this.biaoqianflag = true;
      this.resultList = [];
    }
  }
};
</script>

<style scoped>
.biaoqian {
  margin-right: 10px;
}
</style>
